<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>用户管理</BreadcrumbItem>
      <BreadcrumbItem>用户详情</BreadcrumbItem>
    </Breadcrumb>
    <div class="form_box">
      <Form ref="formCustom" style="width: 1000px;" :model="form" :label-width="120">
        <FormItem>
          <Button type="default" style="margin-left: -88px;" @click="$router.go('-1')">返回</Button>
        </FormItem>
        <FormItem label="用户头像:">
          <img :src="info.head" alt=""/>
        </FormItem>
        <FormItem label="用户名称:">
          <Input type="email" v-model="info.nickname" style="width: 200px;" placeholder="请输入用户名称"></Input>
        </FormItem>
        <FormItem label="用户等级:">
          <Input type="text" style="width: 200px;" v-model="info.grade"></Input>
        </FormItem>
        <FormItem label="用户手机号:">
          <Input type="text" style="width: 200px;" :value="info.mobile"></Input>
        </FormItem>
        <FormItem label="用户邮箱:">
          <Input type="text" style="width: 200px;" :value="info.email"></Input>
        </FormItem>
        <FormItem label="用户零钱:">
          <Input type="text" style="width: 200px;" :value="info.balance"></Input>
        </FormItem>
        <FormItem label="用户积分:">
          <Input type="text" style="width: 200px;" :value="info.score"></Input>
        </FormItem>
        <FormItem label="用户状态:">
          <Input type="text" style="width: 200px;" :value="info.status===1?'启用':'禁用'"></Input>
        </FormItem>
        <FormItem label="用户创建时间:">
          <Input type="text" style="width: 200px;" value="2020/12/10"></Input>
        </FormItem>
        <FormItem label="用户绑定银行卡:">
          <Select clearable style="width: 200px;" v-model="info.user_bank[0].ROW_NUMBER">
            <Option v-for="item in info.user_bank" :key="item.ROW_NUMBER" :value="item.ROW_NUMBER">{{
                item.user_bank
              }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="购买记录:">
          <div class="addCursor" @click="$router.push({path:'/userChange/buy',query:{id:uid}})"><p
            style="color:deepskyblue;">
            查看详情--></p>
          </div>
        </FormItem>
        <FormItem label="充值记录:">
          <div class="addCursor" @click="$router.push({path:'/userChange/invest',query:{id:uid}})"><p
            style="color:deepskyblue;">
            查看详情--></p>
          </div>
        </FormItem>
        <FormItem label="转账记录:">
          <div class="addCursor" @click="$router.push({path:'/userChange/send',query:{id:uid}})"><p
            style="color:deepskyblue;">
            查看详情--></p>
          </div>
        </FormItem>
        <FormItem label="用户活动记录:">
          <div class="addCursor" @click="$router.push({path:'/userChange/activity',query:{id:uid}})"><p
            style="color:deepskyblue;">
            查看详情--></p>
          </div>
        </FormItem>
        <FormItem label="用户地址:">
          <Input type="textarea" style="width:500px;"
                 :value="info.address"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="Submit" style="margin-left: 186px;">确定</Button>&nbsp;&nbsp;&nbsp;&nbsp;
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uid: '',
      form: {
        username: '',
        password: '',
        role_id: null,
        manager_id: null, // 经理id 经理角色账号时 不填
        email: '' // 邮箱
      },
      selectData: null, // 权限组选中下标
      selectList: [], // 权限预览id
      show: true,

      list_: [],

      list: [],
      roleList: [],

      checkAll: true,
      role_id: null,
      data: [],
      accountList: [],

      my_role_id: null, // 6经理
      //  ---------------------- yx ----------------------
      info: {}
    }
  },
  created () {
    // this.m_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id

    this.my_role_id = JSON.parse(this.astgo.getItem(this.Pn + 'info')).role_id
    console.log(this.my_role_id)

    this.getlist()
    this.all()
    this.getAccount()
  },
  methods: {
    getAccount () { // 获取所有经理
      this.axios.post('device/getAccount').then(res => {
        if (res.code === 1) {
          this.accountList = res.data
        }
      })
    },
    all () {
      this.axios.post('role/rule_list').then(res => {
        if (res.code === 1) {
          this.data = res.data
        }
      })
    },

    Submit () {
      var form = this.form
      form.role_id = this.role_id
      // var id =  JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;

      // if(id == 6){
      // 经理不需要写经理id
      // }else{
      // form.manager_id = id;
      // }

      // if(!this.$testEmail(form.email)){
      // this.$Message.warning('请填写正确的邮箱');
      // return false
      // }

      console.log(form)

      this.axios.post('account/addAccount', form).then(res => {
        if (res.code === 1) {
          this.$Message.success('添加成功')
          this.$router.go(-1)
        }
      })
    },

    getlist () {
      // 如果是经理只能添加操作员

      this.axios.post('role/role_list', { status: 1 }).then(res => {
        if (res.code === 1) {
          // eslint-disable-next-line no-mixed-spaces-and-tabs
          if (this.my_role_id === 6) {
            this.role_id = 7
            this.list = []

            var arr = res.data.list

            for (var i = 0, len = arr.length; i < len; i++) {
              if (arr[i].id === 7) {
                this.list.push(arr[i])
                break
              }
            }
          } else {
            this.list = res.data.list
            this.role_id = this.list[0].id
            console.log(this.selectData)
          }

          this.selectData = this.list[0].id

          this.getRole()
        }
      })
    },

    getRole () {
      this.axios.post('role/get_role_rule', { role_id: this.role_id }).then(res => {
        if (res.code === 1) {
          this.list_ = res.data
          console.log(this.list_)
        }
      })
    },
    changeSelect (e) {
      console.log('选择', e)
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
      this.role_id = e
      this.getRole()
    },
    // -------------------- axios -------------------------
    userDetail (pd) {
      this.axios.get('user/userDetail', {
        params: pd,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        // eslint-disable-next-line no-tabs,no-mixed-spaces-and-tabs
      })
        .then(res => {
          this.info = res.data
        })
    }
  },
  mounted () {
    this.uid = this.$route.query.id
    const pd = {
      id: this.uid
    }
    this.userDetail(pd)
  }
}
</script>

<style scoped>
h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.check {
  margin-top: 5px;
  margin-left: 30px;
  min-width: 160px;
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}

.addCursor {
  cursor: pointer;
}
</style>
